<template>
  <view class="pickerMain">
    <view @click="open" class="input">
      {{format}}
    </view>

    <uv-picker ref="picker" :columns="props.columns" :keyName="props.keyName" @confirm="confirm"></uv-picker>
  </view>
</template>

<script setup lang="ts">
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue", "placeholder", "columns", "keyName"]);
const emit = defineEmits(["update:modelValue"]);

let format = computed(() => {
  let text = props.placeholder ? props.placeholder : "请选择";
  let p = "";
  console.log("valueData", valueData.value, props.columns);
  if (props.columns && props.columns.length) {
    let array = props.columns[0];
    console.log("array", array);
    let current = proxy.$utils.findIndexByField(array, "id", valueData.value);
    if (current != -1) p = array[current][props.keyName];
  }
  return p ? p : text;
});

const valueData = computed({
  get() {
    return props.modelValue;
  },
  set(value: string) {
    console.log("value", value);
  },
});

let open = () => {
  instance.refs.picker.open();
};
let confirm = (e) => {
  console.log("confirm", e.value[0].id);
  emit("update:modelValue", e.value[0].id);
};

defineExpose({ open });
</script>

<style lang="scss" scoped>
.input {
  color: #808080;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 2px;
}
</style>
